<template>
    <div style="width: 100%; height: 100%">
        <div id="main" style="width: 100%; height: 100%"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: {
                name: '中央军委',
                label: { rotate: -0 },
                children: [
                    {
                        name: 'data',
                        children: [
                            {
                                name: 'converters',
                                children: [
                                    { name: 'Converters', value: 721 },
                                    { name: 'DelimitedTextConverter', value: 4294 }
                                ]
                            },
                            {
                                name: 'DataUtil',
                                value: 3322
                            }
                        ]
                    },
                    {
                        name: '358团',
                        children: [
                            { name: 'DirtySprite', value: 8833 },
                            { name: 'LineSprite', value: 1732 },
                            { name: 'RectSprite', value: 3623 }
                        ]
                    },
                    {
                        name: 'flex',
                        children: [{ name: 'FlareVis', value: 4116 }]
                    },
                    {
                        name: 'query',
                        children: [
                            { name: 'AggregateExpression', value: 1616 },
                            { name: 'And', value: 1027 },
                            { name: 'Arithmetic', value: 3891 },
                            { name: 'Average', value: 891 },
                            { name: 'BinaryExpression', value: 2893 },
                            { name: 'Comparison', value: 5103 },
                            { name: 'Range', value: 1594 },
                            { name: 'StringUtil', value: 4130 },
                            { name: 'Sum', value: 791 },
                            { name: 'Variable', value: 1124 },
                            { name: 'Variance', value: 1876 },
                            { name: 'Xor', value: 1101 }
                        ]
                    },
                    {
                        name: 'scale',
                        children: [
                            { name: 'IScaleMap', value: 2105 },
                            { name: 'LinearScale', value: 1316 },
                            { name: 'RootScale', value: 1756 },
                            { name: 'Scale', value: 4268 },
                            { name: 'ScaleType', value: 1821 },
                            { name: 'TimeScale', value: 5833 }
                        ]
                    }
                ]
            }
        };
    },
    mounted() {
        this.initEcharts();
    },
    methods: {
        initEcharts() {
            const baseLabel = {
                fontSize: 14,
                lineHeight: 21,
                borderWidth: 2,
                padding: 10,
                borderRadius: 5,
                align: 'center',
                overflow: 'breakAll',
                backgroundColor: '#eee',
                borderColor: '#ddd'
            };
            const lineLabel = {
                fontSize: 12,
                color: '#000',
                offset: [0, 20]
            };
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            myChart.setOption({
                backgroundColor: '#02246d',
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}'
                },

                series: [
                    {
                        type: 'tree',
                        id: 0,
                        name: 'tree1',
                        data: [this.data],
                        top: '10%',
                        left: '8%',
                        bottom: '22%',
                        right: '20%',
                        symbol: 'arrow',
                        edgeSymbol: ['circle', 'arrow'],
                        symbolRotate: 0, // 箭头顺时针旋转90度
                        // symbolOffset: [0, -20],
                        symbolSize: 1,
                        // symbolSize: [120, 40],  // 长方形的宽、高
                        initialTreeDepth: -1, // 默认展开
                        layout: 'orthogonal',
                        orient: 'TB',
                        edgeShape: 'curve', // curve:曲线
                        // edgeForkPosition: '30%', // 分叉点与子树父节点的距离占整个子树高度的百分比;(edgeShape: 'polyline')时
                        roam: true, // 缩放移动
                        lineStyle: {
                            type: 'dashed', // 连线的样式 'curve'|'broken'|'solid'|'dotted'|'dashed'
                            // type: [10, 20],
                            // dashOffset: 10,
                            width: 2,
                            curveness: 0.5,
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#4C84FF' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#F07AAD' // 100% 处的颜色
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            }
                        },
                        itemStyle: {
                            // color: 'red',
                            // borderColor:"red",
                            rotate: -90
                        },
                        label: {
                            // rotate: -90,
                            // color: 'red', // 文字颜色
                            // fontSize: 20,
                            // fontFamily: 'Microsoft YaHei',
                            // // backgroundColor: '#fff',
                            // position: 'left',
                            // verticalAlign: 'middle',
                            // lineHeight: 86, // 行高
                            // padding: [10, 10, 10, 10],
                            // align: 'right'

                            rotate: -90,
                            position: 'center',
                            verticalAlign: 'middle',
                            align: 'center',
                            backgroundColor: '#7049f0',
                            borderRadius: 6,
                            formatter: ['{box|{b}}'].join('\n'),
                            rich: {
                                box: {
                                    fontSize: 15,
                                    // height: 30,
                                    color: '#fff',
                                    padding: [5, 5],
                                    align: 'center'
                                }
                            }
                        },
                        leaves: {
                            label: {
                                // position: 'right',
                                // verticalAlign: 'middle',
                                // align: 'left'
                                rotate: -90,
                                position: 'center',
                                verticalAlign: 'middle',
                                align: 'left',
                                backgroundColor: '#7049f0',
                                formatter: ['{box|{b}}'].join('\n'),
                                rich: {
                                    box: {
                                        height: 18,
                                        color: '#fff',
                                        padding: [0, 5],
                                        align: 'center'
                                    }
                                }
                            }
                        },
                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            });
        }
    }
};
</script>

<style>
</style>